@import './index.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    overflow-x: hidden;
}

body{
    margin: 0 auto;
    padding: 0;
}
a{
    text-line-through: none;
    text-decoration: none;
}
p{
    padding: 0;
    margin: 0;
}

input{
    background-color: transparent !important;
}
input:focus{
    box-shadow: none!important;
    --tw-ring-color: transparent!important;
}


@layer base {
    :root {
        --bg-color: #202024;
        --bar-color: rgba(0, 0, 0, 0.2);
    }

    .dark {
        --bg-color: #f9f9f9;
        --bar-color: rgba(255, 255, 255, 0.2);
    }
}

@keyframes breathe {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

::-webkit-scrollbar {
    --bar-width: 5px;
    background-color: transparent;
    width: var(--bar-width);
    height: var(--bar-width);
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--bar-color);
    border-radius: 20px;
    background-clip: content-box;
    border: 1px solid transparent;
}

.aspect-16-10 {
    aspect-ratio: 16/10;
}

.aspect-9-16 {
    aspect-ratio: 9/16;
}

.aspect-16-9 {
    aspect-ratio: 16/9;
}

.aspect-4-3 {
    aspect-ratio: 4/3;
}

.aspect-3-4 {
    aspect-ratio: 3/4;
}
.aspect-1-1 {
    aspect-ratio: 1;
}

.hover-zoom-in2 {
    transition: transform 0.3s ease-in-out, translateY 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.hover-zoom-in2 :hover > > .hover-zoom-in2 {
    scale: 1.2;
}

.custom-bg-line1 {
    background-image: linear-gradient(283.8deg, rgb(8, 124, 250) 5.73%, rgb(33, 215, 137) 100%);
    background-color: rgb(33, 215, 137);
}

.custom-bg-line2 {
    background-image: linear-gradient(246.1deg, rgb(0, 224, 214) 1.67%, rgb(126, 27, 253) 92.48%);
    background-color: rgb(107, 87, 255);
}



.custom-bg-line4 {
    background: #38266b radial-gradient(89.53% 145.96% at .34% 100.79%, #081a4d 0, #07042c 17.58%, #06032d 50.31%, #7f52ff 97.03%);
}


.custom-bg-line3 {
    background: #4912e3 radial-gradient(89.53% 145.96% at .34% 100.79%, #0d42f5 0, #3125c4 17.58%, #3025c2 50.31%, #7f52ff 97.03%);
}



.gradient-border-light {
    background: linear-gradient(1turn,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
}

.gradient-border-dark {
    background: linear-gradient(1turn,hsla(0,0%,100%,.5),hsla(0,0%,100%,.1),#fff,hsla(0,0%,100%,.3));
}


.hover-img {
    position: absolute;
    border-radius: 24px;
    opacity: 0.6;
    transform: scale(0) translateX(50%);
    filter: blur(20px) opacity(65%);
    z-index: -1;
    transition: all 0.5s ease-in-out;
}

.md-editor {
    background-color: transparent!important;
}

